<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Inline Edit Box Test</title>

		<style type="text/css">
			@import "../../../../dijit/themes/claro/document.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
		</style>

		<!-- required: a default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="parseOnLoad: true, isDebug: true, has: { 'dojo-bidi': true }"></script>

		<script type="text/javascript">
			dojo.require("dojo.data.ItemFileReadStore");
			dojo.require("dijit.InlineEditBox");
			dojo.require("dijit.form.Textarea");
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.CurrencyTextBox");
			dojo.require("dojo.currency");
			dojo.require("dijit.form.ComboBox");
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.form.NumberSpinner");

			dojo.require("dijit.Editor");
			dojo.require("dijit._editor.plugins.AlwaysShowToolbar");

			dojo.require("dojo.parser");	// scan page for widgets and instantiate them

			function myHandler(newValue){
				this._onChangeValue = newValue;	// used by robot test file
				console.debug("onChange for id = " + this.id + ", value: " + newValue);
			}
		</script>
	</head>
	<body class="claro">

		<h1 class="testTitle">Dijit InlineEditBox Bidi Test</h1>


		<span data-dojo-id="productStore" data-dojo-type="dojo/data/ItemFileReadStore" >
			<script type="dojo/method">
				this._jsonData = {
					identifier: 'name',
					label: 'name',
					items: [
						{ name: "refrigerator..." },
						{ name: "\u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020" },
						{ name: "stove \u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020 ..." },
						{ name: "\u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020 heater ..." }
					]
				};
			</script>
		</span>

		<h2>InlineEditBox with TextBox</h2>
			<h3>TextDit LTR: </h3>
			<span id="P0" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"ltr", value:"", onChange:myHandler, autoSave:true, title:"test"'>
			</span>
			<h3>TextDir RTL: </h3>
			<span id="P1" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"rtl", value:"&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!!", onChange:myHandler, autoSave:true, title:"test"'>
				</span>
			<h3>TextDir AUTO: </h3>
				<span id="P2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"auto", value:"Hello!", onChange:myHandler, autoSave:true, title:"test"'>
				</span>
			<input id="button" type="button" onclick="dijit.byId('P2').set('value', '&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!')"  value = "change value"/>


		<h2>InlineEditBox with Textarea</h2>
		<h3>TextDir LTR</h3>
			<span id="P3" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"ltr", editor:"dijit.form.Textarea", value: "Text Area test &#1506;&#1512;&#1498; !!!", title:"additional details"'></span>
			<h3>TextDir RTL</h3>
			<span id="P4" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"rtl", editor:"dijit.form.Textarea", value: "Text Area test &#1506;&#1512;&#1498; !!!", title:"additional details"'></span>
			<h3>TextDir AUTO</h3>
			<span id="P5" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"auto", editor:"dijit.form.Textarea", value: "Text Area test &#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!!!", title:"additional details"'></span>
			<input id="Button1" type="button" onclick="dijit.byId('P5').set('value', '&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!')"  value = "change value"/>


		<h2>InlineEditBox with Combobox</h2>
		<h3>TextDir LTR</h3>
		<span id="combo1" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"ltr", editor:"dijit.form.ComboBox",
					editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
					width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
		<h3>TextDir RTL</h3>
		<span id="combo2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"rtl", editor:"dijit.form.ComboBox",
					editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
					width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
		<h3>TextDir AUTO</h3>
		<span id="combo3" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"auto", editor:"dijit.form.ComboBox",
					editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
					width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
	</body>
</html>
